<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\Url;
 ?>

<style>
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.course-item-list-multi .item-object {
    position: relative;
    width: 64px;
    height: 54px;
    background-color: #1abc9c;
    float: left;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #16a085;
    text-align: center;
}
.teacher-carousel .teacher-item-active {
    display: block;
}
.teacher-carousel .teacher-item .nickname {
    text-align: center;
    font-size: 16px;
    margin: 15px 0 5px;
}
.teacher-carousel .teacher-item .title {
    text-align: center;
    margin: 5px 0 5px;
    color: #666;
}
.teacher-carousel .teacher-item .divider {
    background: #e3e3e3;
    height: 1px;
    overflow: hidden;
    margin: 15px 0;
}
.teacher-carousel .teacher-item .about {
    font-size: 13px;
}
.item-object i {
    margin-top: 8px;
    font-size: 24px;
    color: #fff;
}
.fa-file-movie-o:before, .fa-file-video-o:before {
    content: "\f1c8";
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
.course-item-list-multi h3, .course-item-list-multi h4 {
    font-size: 16px;
    font-weight: normal;
    line-height: 36px;
    text-indent: 15px;
    background: #f3f3f3;
    color: #777;
    border-bottom: 1px solid #e3e3e3;
    margin: 20px 0;
}
.course-item-list-multi h4 {
    margin: 20px 0 20px 20px;
}
a {
    color: #428bca;
    text-decoration: none;
}
.es-row-wrap .row {
    margin-left: 10px;
    margin-right: 10px;
}.course-item-list-multi .item-body {
    margin-left: 72px;
}
.course-item-list-multi .item-seq-name {
    color: #999;
    font-weight: bold;
    margin-bottom: 3px;
}

.course-item-list-multi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.panel-body {
    padding: 15px;
}
 .es-row-wrap {
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e1e1e1;
  }

  .col-sm-7{
    width: 58.33333333%;
  }
  .title{
      font-size: 22px;
      margin: 0 0 6px;
     }
  .price-info{
      margin-bottom: 15px;
      padding: 10px;
      background-color: #f5f5f5;
      list-style: none;
      font-size: 13px;
    }
  .price-info > li {
    line-height: 22px;
  }
  .course-price-widget .price {
    font-size: 18px;
        color: #f40;
    margin-right: 10px
  }
  .price-info-label {
    width: 60px;
    display: inline-block;
    color: #999;
  }
  .course-cover-heading .stat-item-label {
    margin-right: 8px;
  }
  .course-cover-heading .stats {
    padding-left: 10px;
    margin-bottom: 20px;
    color: #999;
}

.btn-primary {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
    border-color: transparent;
}
.btn-fat {
    padding-left: 30px;
    padding-right: 30px;
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .pull-left {
    float: left;
  }
  .pull-left {
      float: left!important;
  }
  .course-item-list-multi .item-object .item-length {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    color: #ffffff;
    /* font-size: 12px; */
    background: #666666;
    background: rgba(0,0,0,0.3);
    z-index: 1;
    line-height: 16px;
    border-radius: 0 0 5px 5px;
    display: block;
}

#course-nav-tabs.affix {
    z-index: 1030;
    position: fixed;
    margin-left: -1px;
    top: 0px;
    width: 669px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 3px 3px rgba(0,0,0,.1);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.course-cover-heading .title {
    font-size: 22px;
    margin: 0 0 6px;
}
.course-cover-heading .subtitle {
    font-size: 14px;
    color: #999;
    margin: 0 0 15px;
}
.course-cover-heading {
    padding-top: 20px;
    margin-bottom: 20px;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.teacher-carousel .carousel-inner .item {
    text-align: center;
}
.nav-pills>li>a {
    border-radius: 4px;
}
.nav-pills>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-body {
    padding: 15px;
}
.teacher-carousel .carousel-inner img.avatar {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    display: inline-block;
}
.teacher-carousel-onlyone .carousel-control {
     display: none;
}
.mbl{
  margin: 10px 0px;
}
</style>

  <div id="content-container" class="container" style="margin-top:50px">
  <div class="es-row-wrap container-gap course-cover">
  <div class="row course-cover-heading">
  <div class="col-sm-5 picture">
        <?php if ($course['detail']['course_thumb']) {?>
          <img src="<?php echo 'http://files.bwphp.com/file/image/show/390/175?path='.$course['detail']['course_thumb'];?>" class="img-responsive">
        <?php }else{ ?>
          <img src="http://admin.bwphp.com/css/course/coursePicture" class="img-responsive">
         <?php } ?>
        <span class="tag-serial"></span>


  </div>
  <div class="col-sm-7 info">


    <h1 class="title"><?php echo $course['detail']['course_name']; ?>
          </h1>
    <div class="subtitle"></div>
    <ul class="price-info">
  <li>
          <span class="price-info-label">价格</span>
        <span class="price-info-content">
<span class="course-price-widget">
          <span class="price">
            <?php if ($course['detail']['course_price']>0) {
              echo $course['detail']['course_price'];
            }else{
              echo "免费";
              } ?>
          </span>
  </span></span>
  </li>
  </ul>
    <div class="stats">
      <span class="stat-item">
        <span class="stat-item-label">评价</span>
        <span class="stars-5">&nbsp;</span>
        <span>(<?php echo count($course['comment']) ?>人)</span>
      </span>
        <span class="stat-divider">|</span>
        <span class="stat-item">
          <span class="stat-item-label">学员</span>
          <span class="member-num"><?php echo $course['detail']['apply_num'];?>人</span>
        </span><br>
        <span class="stat-item"><?php if ($course['detail']['type_id']==11) {
          echo "开课时间：".$course['detail']['open_date'];
        } ?></span>

          </div>
    <div class="actions clearfix" style="float: left;">
      <div class="pull-left">
      <?php if ($course['detail']['course_price']>0) { ?>
           <a class="btn btn-primary btn-fat " id="course-buy-btn" href="<?php echo \Yii::$app->urlManager->createUrl(['course/add-cart','course_id' =>$course['detail']['course_id'],]); ?>">
         购买课程</a>
      <?php }else{ ?>
          <a class="btn btn-primary btn-fat " id="course-buy-btn" href="<?php echo \Yii::$app->urlManager->createUrl(['course/add-course','course_id' =>$course['detail']['course_id'],]); ?>">
         加入课程</a>
      <?php } ?>

        </div>
        <div class="pull-left hidden-xs" style="margin-left: 20px">
          <a class="btn btn-link collect" id="<?php echo $course['detail']['course_id']; ?>" href="javascript:">
            收藏课程
          </a>
        </div>
      </div>
      <div class="bshare-custom icon-medium-plus" style="float: right;">
          <span class="ico-label-text" style="vertical-align: top; font-size:18px">分享到:</span>
            <a class="bshare-weixin" data-cnd="weixin" title="分享到微信"></a>

            <a title="分享到QQ空间" class="bshare-qzone"></a>

            <a title="分享到新浪微博" class="bshare-sinaminiblog"></a>

            <a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
        </div>
        <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
        <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
  </div>
</div></div>

<div class="es-row-wrap container-gap course-cover ptl">
  <div class="row row-8-4">
    <div class="col-md-8" >
      <div class="course-nav-tabs">
  <ul class="nav nav-pills mbl affix-top" id="course-nav-tabs">
    <li class="active">
      <a href="#course-about-pane" class="btn-index" data-anchor="#course-about-pane">课程介绍</a>
    </li>
            <li>
      <a href="#course-list-pane" class="btn-index" data-anchor="#course-list-pane">课程列表</a>
    </li>
    <li class="">
      <a href="#course-review-pane" class="btn-index" data-anchor="#course-review-pane">
        课程评价
        <span class="badge"><?php echo count($course['comment']) ?></span>
      </a>
    </li>
  </ul>
</div>

<div id="course-about-pane" class="panel panel-default ">
  <div class="panel-heading">
    <h3 class="panel-title">课程介绍</h3>
  </div>
  <div class="panel-body">
        <span class="text-muted">
          <?php if ($course['detail']['describe']) {
            echo $course['detail']['describe'];
          }else{
            echo "还没有课程介绍...";
            } ?>
        </span>
  </div>
</div>
<div id="course-list-pane" class="panel panel-default ">
  <div class="panel-heading"><h3 class="panel-title">课时列表</h3>
</div>
  <div class="panel-body">
    <?php foreach ($course['catalog'] as $sec_key => $section) {?>
    <div class="course-item-list-multi">
      <h3>第 <?php echo $sec_key+1; ?> 章：　<strong><?php echo $section['section_name'] ?></strong></h3>
        <?php if (!empty($section['joint'])) { ?>
          <?php foreach ($section['joint'] as $j_key => $joint) { ?>
            <h4>第 <?php echo $j_key+1 ?> 节： <strong><?php echo $joint['joint_name'] ?></strong></h4>
          <?php if (!empty($joint['period'])) { ?>
            <?php foreach ($joint['period'] as $p_key => $period) { ?>


        <ul class="row">
          <li class="col-md-4 clearfix item">
            <a class="item-object item-object-video" href="#modal" data-toggle="modal" data-url="/eudsoho/web/app.php/course/1/lesson/3/preview" data-backdrop="static" data-keyboard="false" title="bdthvjzf">
                <i class="">
                  <img src="/public/video-file.png" style="margin-top:5px" width="30px" height="30px" alt=""></i>
                <span class="item-length">
                  <?php if ($period['movie_name']) {
                      echo $period['length_minute'].":".$period['length_second'];
                  }else{
                        echo "未发布";
                    } ?>

                </span>
            </a>
            <div class="item-body">
              <div class="item-seq-name">课时<?php echo $p_key+1; ?>:</div>
              <div class="item-title">
                <a href="#modal" data-toggle="modal" data-url="/eudsoho/web/app.php/course/1/lesson/3/preview" title="bdthvjzf"><?php echo $period['period_name'] ?></a>
              </div>
              <div class="text-muted" style="font-weight:normal;font-size:12px;color:#aaa;width:150px"><?php if ($course['detail']['type_id']==11 && !$period['movie_name']) {
                echo date("Y-m-d H:i:s",$period['open_time'])."开课";
              } ?></div>
            </div>
          </li>
        </ul>
      <?php } ?>
      <?php } ?>
      <?php } ?>
      <?php } ?>
      </div>
      <?php } ?>

  </div>
</div>
<div id="course-review-pane" class="panel panel-default ">
  <div class="panel-heading">
    <h3 class="panel-title">课程评价</h3>
  </div>
  <div class="panel-body">
    <div id="course-review-pane-show" data-url="/eudsoho/web/app.php/course/1/review/list">
<ul class="media-list">
  <?php foreach ($course['comment'] as $key => $comment) { ?>

          <li class="media">
      <a class="user-link user-avatar-link pull-left" href="/eudsoho/web/app.php/user/1">
    <img src="<?php echo 'http://files.bwphp.com/file/image/show/50/50?path='.$comment['user'][0]['user_thumb']?>" width="40px" height="40px">
  </a>
      <div class="media-body">
        <div class="media-heading">
          <a href="/eudsoho/web/app.php/user/1"><?php echo $comment['user_name']; ?></a>
          <span class="bullet">•</span>
          <span class="text-muted"><?php echo date("Y-m-d H:i:s",$comment['comment_addtime']) ?></span>
        </div>
        <div class="media-content">
          <div><span class="stars-5"></span></div>
          <?php echo $comment['comment_content'] ?>
        </div>
      </div>
    </li>
   <?php } ?>
  </ul>

</div>

  </div>
</div>    </div>

<div class="col-md-4" style="margin-top:20px">
  <div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">课程教师</h3>
  </div>
  <div class="panel-body">
    <div class="teacher-carousel teacher-carousel-onlyone">
      <div class="carousel slide" id="teacher-carousel">
        <div class="carousel-inner">
            <div class="item active" data-id="1">
              <a href="/eudsoho/web/app.php/user/1">
              <img src="<?php echo 'http://files.bwphp.com/file/image/show/100/100?path='.$course['detail']['teacher']['teacher_thumb']; ?>" class="avatar"></a>
            </div>
        </div>
        <a class="left carousel-control" href="#teacher-carousel" data-slide="prev">
            <span class="icon-prev"></span>
          </a>
        <a class="right carousel-control" href="#teacher-carousel" data-slide="next">
            <span class="icon-next"></span>
          </a>
        </div>
        <div class="teacher-detail" id="teacher-detail">
            <div class="teacher-item teacher-item-1 teacher-item-active">
              <div class="nickname"><a href="/index.php/teacher/teacherinfo?teacher_id=<?php echo $course['detail']['teacher_id'] ?>"><?php echo $course['detail']['teacher']['teacher_name']?></a><br>
                <a href="/index.php/teacher/teacherinfo?teacher_id=<?php echo $course['detail']['teacher_id'] ?>" class="go font12" type="2">查看他的课程</a></div>
              <div class="title"><?php echo $course['detail']['teacher']['teacher_from']?></div>
              <div class="divider"></div>
              <div class="about"><p><?php echo $course['detail']['teacher']['teacher_desc']?></p></div>
            </div>
         </div>
      </div>
  </div>
</div>

    </div>
  </div>

</div>

  </div><!-- /container -->


</body>

<div class="modal fade" id="likeTwice" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" style="top:150px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" style="font-size: 18px;">消息提示</h4>
            </div>
            <div class="modal-body">
                <section class="box-login v5-input-txt" id="box-login">
                        <center><h4 style="font-size: 18px;margin-bottom: 20px;">您已收藏，不能再收藏了！</h4>
                        <button data-dismiss="modal"  style="width: 150px;" type="button" class="btn btn-micv5 btn-block">确定</button></center>

                </section>
            </div>
        </div>
    </div>
</div>
<script>
    //收藏
    $(document).on('click','.collect',function(){
        var id = $(this).attr('id');
        $.ajax({
            type : "get",
            url : "<?php echo Url::to(['course/collect']);?>",
            data : 'id='+id,
            dataType : 'json',
            success: function(msg){
                if(msg.code == 1){
                    jq('#loginModal').modal('show');
                }else if(msg.code == 2){
                    //不能重复喜欢
                    jq('#likeTwice').modal('show');
                }else if(msg.code == 3){
                    //喜欢成功
                    //thiss.replaceWith()
                    alert(msg.msg)
                }else if(msg.code == 4){
                    alert(msg.msg)
                }
            }
        });
    })
</script>